<!-- 字典数据 -->
<template>
  <div class="app-container drawer-container" v-loading="loading">
    <div class="block">
      <el-form
        ref="formRef"
        :model="form"
        :inline="true"
        size="default"
        label-width="100"
        label-position="left"
        :rules="rules"
        class="mt-[15px]"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="节假日名称" prop="name1">
              <el-input
                v-model="form.holidayName"
                placeholder="请输入节假日名称"
                clearable
                maxlength="20"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择日期" prop="name2">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                format="YYYY-MM-DD"
                range-separator="-"
                value-format="YYYY-MM-DD"
                start-placeholder="选择开始日期"
                end-placeholder="选择结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请输入备注" prop="name3">
              <el-input
                v-model="form.remark"
                placeholder="请输入备注内容"
                clearable
                maxlength="50"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="footer pb-[15px] mt-[-20px] pr-[15px]">
      <el-button type="primary" @click="debounce_fun()">确 定</el-button>
      <el-button @click="f_CloseDialog">取 消</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "DictData",
  inheritAttrs: false,
});
import { debounce } from "lodash";
import HolidayAPI from "@/api/HolidayAPI";
import moment from "moment";
const props = defineProps(["form"]);
const emits = defineEmits(["close"]);
const formRef = ref(ElForm);
const loading = ref(false);
const form = reactive(props.form);
const daterange = ref([]);

// 放抖
const debounce_fun = debounce(f_HandleSubmit, 1000);

// 提交数据
function f_HandleSubmit() {
  if (!form.holidayName) {
    ElMessage.error("请输入节假日名称！");
    return;
  }
  if (!daterange.value.length) {
    ElMessage.error("请选择开始结束时间！");
    return;
  }
  form.startDate = moment(daterange.value[0]).format("YYYY-MM-DDT00:00:00");
  form.endDate = moment(daterange.value[1]).format("YYYYY-MM-DDT23:59:59");
  form.remark =
    form.remark.length > 50 ? form.remark.substr(0, 50) : form.remark;

  loading.value = false;
  HolidayAPI.api_add(form)
    .then(() => {
      ElMessage.success("提交成功");
      f_CloseDialog();
    })
    .finally(() => (loading.value = false));
}

// 关闭弹窗
function f_CloseDialog() {
  emits("close");
}

onMounted(() => {
  if (form.id) {
    daterange.value = [form.startDate, form.endDate];
  } else {
    daterange.value = [];
  }
});
</script>
<style lang="scss" scoped>
.drawer-container {
  background: transparent;

  .block {
    padding: 15px;
    margin-bottom: 20px;
    background: #fff;

    .title {
      padding-bottom: 10px;
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: bold;
      border-bottom: 1px dashed #eee;
    }

    :deep .el-form {
      .el-form-item {
        width: 100%;

        .el-form-item__label {
          font-size: 12px !important;
        }

        .el-date-editor.el-input {
          width: 100%;
        }
      }
    }
  }
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  text-align: center;
  background: #fff;
  border-top: 1px dashed #eee;

  button {
    width: 160px !important;
    height: 28px !important;
    margin-right: 40px;
    margin-left: 40px;
    border-radius: 15px;

    > span > svg {
      margin-right: 6px;
    }
  }
}
</style>
